<template>
	<view class="main">
		<tou_hand1 handtitle='我的信息'></tou_hand1>
		<van-tabs v-model="active" >
			<van-tab title="意见反馈" name="a">
				<view class="show">
					<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
					<van-list v-model="loading" :offset="300" :finished="finished" finished-text="没有更多了" @load="loadMore">
						<van-cell v-for="(item,index) in showlist" :key="index" >
							<view class="one">
								<view class="onehand">
									<view>反馈内容：<span style='color: #939393;'>{{item.msg}}</span></view>
									<view class="onetime">
										创建时间：{{item.createTime}}
									</view>
								</view>
								<view class="onetxt" v-show="item.status==1">
									<view class="onetxtone" >回复：<span style='color: #939393;'>{{item.handleMsg}}</span></view>
									<view style='text-align: right;font-size: 20upx;'>
										回复时间：{{item.updateTime}}
									</view>
								</view>
								<view class="onetxt" v-show="item.status==0"><span class="onetxtone"  style="color: red;">待回复</span>{{item.handleMsg}}</view>
							</view>
						</van-cell>
					</van-list>
					</van-pull-refresh>
				</view>
			</van-tab>
			<van-tab title="故障反馈" name="b">
				<view class="showtwo">
					<van-collapse v-model="activeNames">
						<van-pull-refresh v-model="trefreshing" @refresh="tonRefresh">
						<van-list v-model="tloading" :offset="300" :finished="tfinished" finished-text="没有更多了" @load="tloadMore">
						<van-cell v-for="(item, index) in tshowlist" :key="index" >
						<van-collapse-item :name="index" >
							<template #title>
								<view class="bone">
									<view class="boneshang">{{item.types}}
									<span style="color: red;" v-show="item.status==0">（处理中）</span>
									<span style="color: #007AFF;" v-show="item.status==1">（已处理）</span>
									</view>
									<view class="bonexia">{{item.createTime}}</view>
								</view>
							</template>
							<view class="btwo">
								<view class="btwotxt">小区名：{{item.projectName}}</view>
								<view class="btwotxt">充电区：{{item.areaName}}</view>
								<view class="btwotxt">设备号：{{item.code}}</view>
								<view class="btwotxt">反馈内容：{{item.contents}}</view>
								<view class="btwotxt">回复内容：{{item.handleMsg}}</view>
								<view class="btwotxt">回复时间：{{item.updateTime}}</view>
								<view class="btwoimg" v-show="item.imgStr.length>0">
									<view v-for='(item2,index1) of item.imgStr' :key='index1' >
									      <image :src="item2" alt="" @click="getPhotoClickIdx(index1,index)"/>
									</view>
								</view>
								
							</view>
						</van-collapse-item>
						
						</van-cell>
						</van-list>
						</van-pull-refresh>
					</van-collapse>
				</view>
				
			</van-tab>
			<van-tab title="退款反馈" name="c">
				<view class="showtwo">
					<van-collapse v-model="activeNames1">
						<van-pull-refresh v-model="crefreshing" @refresh="conRefresh">
						<van-list v-model="cloading" :offset="300" :finished="cfinished" finished-text="没有更多了" @load="cloadMore">
						<van-cell v-for="(item, index) in cshowlist" :key="index" >
						<van-collapse-item :name="index" >
							<template #title>
								<view class="bone">
									<view class="boneshang" v-show="item.refundType==0">退余额
									<span style="color: red;" v-show="item.status==0">（处理中）</span>
									<span style="color: #007AFF;" v-show="item.status==1">（已处理）</span>
									</view>
									<view class="boneshang" v-show="item.refundType==1">退包月
									<span style="color: red;" v-show="item.status==0">（处理中）</span>
									<span style="color: #007AFF;" v-show="item.status==1">（已处理）</span>
									</view>
									<view class="bonexia">{{item.createTime}}</view>
								</view>
							</template>
							<view class="btwo">
								<view class="btwotxt">退款原因：{{item.reason}}</view>
								<view class="btwotxt">退款信息：{{item.msg}}</view>
								<view class="btwotxt">处理结果：{{item.handleMsg}}</view>
								<view class="btwotxt">处理时间：{{item.updateTime}}</view>
							</view>
						</van-collapse-item>
						
						</van-cell>
						</van-list>
						</van-pull-refresh>
					</van-collapse>
				</view>
			</van-tab>
		</van-tabs>
		
	</view>
</template>

<script>
	import tou_hand1 from '../../components/tou_hand2/tou_hand2.vue'
	import {
		Config
	} from "../../common/Config.js"
	// import {ImagePreview} from 'vant'
	export default {
		components: {tou_hand1},
		mounted() {

		},

		data() {
			return {
				active: 'a',
				activeNames: [''], //当前展开面板的 name
				activeNames1: [''], //当前展开面板的 name
				loading: false,
				finished: false,
				refreshing: false,
				pageNum: 1, //页码
				pageSize: 10, //每页显示的条数
				showlist: [], //意见反馈列表数据
				tloading: false,
				tfinished: false,
				trefreshing: false,
				tpageNum: 1, //页码
				tpageSize: 10, //每页显示的条数
				tshowlist: [], //意见反馈列表数据
				cloading: false,
				cfinished: false,
				crefreshing: false,
				cpageNum: 1, //页码
				cpageSize: 10, //每页显示的条数
				cshowlist: [], //意见反馈列表数据
			}
		},
		onLoad() {
			this.showlist = [];
			this.onRefresh();
		},
		methods: {
			getPhotoClickIdx(index,index1){
				uni.previewImage({
				    current:this.tshowlist[index1].imgStr[index],
				    urls:this.tshowlist[index1].imgStr
				});
			},
			  
			// 意见反馈分页
			loadMore() {
				if (this.refreshing) {
				  this.showlist = [];
				  this.refreshing = false;
				}
				const that = this;
				let data = {
					pageNum: that.pageNum,
					pageSize: that.pageSize
				}
				that.loading = true;
				that.$base.request('feedback/list', 'GET', data)
					.then(res => {
						that.loading = false;
						if(res.data.rows&&res.data.rows.length>0){
							that.showlist = that.showlist.concat(res.data.rows);
							that.pageNum += 1;
						}else{
							that.finished = true;
						}
					})
					.catch(err => {
				
					})
			},
			 onRefresh() {
			      // 清空列表数据
			      this.finished = false;
				  this.pageNum=1
			      // 重新加载数据
			      // 将 loading 设置为 true，表示处于加载状态
			      this.loading = true;
			      this.loadMore();
			},
			// 故障反馈分页
			tloadMore() {
				if (this.trefreshing) {
				  this.tshowlist = [];
				  this.trefreshing = false;
				}
				const that = this;
				let data = {
					pageNum: that.tpageNum,
					pageSize: that.tpageSize
				}
				that.tloading = true;
				that.$base.request('user/failure/list', 'GET', data)
					.then(res => {
						that.tloading = false;
						if(res.data.rows&&res.data.rows.length>0){
							for(var i=0;i<res.data.rows.length;i++){
								if(res.data.rows[i].imgStr){
									var imgs=res.data.rows[i].imgStr
									for(var j=0;j<imgs.length;j++){
										imgs[j]=Config.api+imgs[j]
									}
									res.data.rows[i].imgStr=imgs
								}else{
									res.data.rows[i].imgStr=[]
								}
							}
							that.tshowlist = that.tshowlist.concat(res.data.rows);
							that.tpageNum += 1;
						}else{
							that.tfinished = true;
						}
					})
					.catch(err => {
				
					})
			},
			 tonRefresh() {
			      // 清空列表数据
			      this.tfinished = false;
				  this.tpageNum=1
			      // 重新加载数据
			      // 将 loading 设置为 true，表示处于加载状态
			      this.tloading = true;
			      this.tloadMore();
			},
			// 退款反馈分页
			cloadMore() {
				if (this.crefreshing) {
				  this.cshowlist = [];
				  this.crefreshing = false;
				}
				const that = this;
				let data = {
					pageNum: that.cpageNum,
					pageSize: that.cpageSize
				}
				that.cloading = true;
				that.$base.request('user/refund/list', 'GET', data)
					.then(res => {
						that.cloading = false;
						if(res.data.rows&&res.data.rows.length>0){
							// for(var i=0;i<res.data.rows.length;i++){
							// 	if(res.data.rows[i].imgStr){
							// 		var imgs=res.data.rows[i].imgStr
							// 		for(var j=0;j<imgs.length;j++){
							// 			imgs[j]=Config.api+imgs[j]
							// 		}
							// 		res.data.rows[i].imgStr=imgs
							// 	}else{
							// 		res.data.rows[i].imgStr=[]
							// 	}
							// }
							that.cshowlist = that.cshowlist.concat(res.data.rows);
							that.cpageNum += 1;
						}else{
							that.cfinished = true;
						}
					})
					.catch(err => {
				
					})
			},
			 conRefresh() {
			      // 清空列表数据
			      this.cfinished = false;
				  this.cpageNum=1
			      // 重新加载数据
			      // 将 loading 设置为 true，表示处于加载状态
			      this.cloading = true;
			      this.cloadMore();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		height: 100vh;
		background-color: #F5F5F5;
		/deep/.van-list__finished-text{
			margin-top: 100upx;
			padding-bottom: 200upx;
		}
		/deep/.van-hairline--top-bottom::after{
			border-width: 0;
		}
		/deep/.van-cell{
			margin-bottom: 30upx;
			border-radius: 20upx;
			align-items: center;
		}
		/deep/.van-collapse-item{
			/deep/.van-cell{
				padding: 0upx;
				margin-bottom: 0upx;
			}
		}
		/deep/.van-tab {
			font-size: 32upx;
			font-family: PingFang SC Bold, PingFang SC Bold-Bold;
			font-weight: 700;
			color: #999999;
		}
		// /deep/.van-cell{
		// 	margin-top: 30upx;
		// }
		/deep/.van-tab--active {
			font-size: 32upx;
			font-family: PingFang SC Bold, PingFang SC Bold-Bold;
			font-weight: 700;
			color: #4b98ed;
		}
		
		/deep/.van-tabs__line {
			width: 91upx !important;
			height: 4upx;
			border-radius: 2px;
			background-color: #4B98ED;
		}
		.show{
			width: 100%;
			box-sizing: border-box;
			padding:20upx;
			.one{
				background-color: #FFFFFF;
				box-sizing: border-box;
				.onehand{
					font-size: 26upx;
					font-family: PingFang SC Bold, PingFang SC Bold-Bold;
					font-weight: 700;
					color: #333333;
					margin-bottom: 15upx;
					border-bottom: 1px dashed #e5e5e5;
					.onetime{
						font-size: 20upx;
						font-family: PingFang SC Regular, PingFang SC Regular-Regular;
						font-weight: 400;
						text-align: right;
						color: #666666;
						line-height: 36px;
					}
				}
				.onetxt{
					font-size: 24upx;
					font-family: PingFang SC Bold, PingFang SC Bold-Bold;
					font-weight: 500;
					color:#666666;
					line-height: 40upx;
					.onetxtone{
						font-size: 24upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						color: #333333;
					}
				}
			}
			
		}
		.showtwo{
			box-sizing: border-box;
			padding: 20upx;
			.bone{
				.boneshang{
					color: #333333;
					font-size: 30upx;
				}
				.bonexia{
					color: #a2a2a2;
					font-size: 22upx;
				}
			}
			.btwo{
				.btwotxt{
					line-height: 40upx;
				}
				.btwoimg{
					display: flex;
					justify-content: space-between;
					margin-top: 30upx;
					
					image{
						border-radius: 20upx;
						width: 150upx;
						height: 150upx;
					}
				}
			}
		}
		
		
	}
</style>
